
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Usage with React Router · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="ExampleRedditAPI.html" />
    
    
    <link rel="prev" href="Middleware.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../introduction/">
            
                <a href="../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../introduction/Motivation.html">
            
                <a href="../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../introduction/CoreConcepts.html">
            
                <a href="../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../introduction/ThreePrinciples.html">
            
                <a href="../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../introduction/PriorArt.html">
            
                <a href="../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../introduction/Ecosystem.html">
            
                <a href="../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../introduction/Examples.html">
            
                <a href="../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../basics/">
            
                <a href="../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../basics/Actions.html">
            
                <a href="../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../basics/Reducers.html">
            
                <a href="../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../basics/Store.html">
            
                <a href="../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../basics/DataFlow.html">
            
                <a href="../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../basics/UsageWithReact.html">
            
                <a href="../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../basics/ExampleTodoList.html">
            
                <a href="../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="./">
            
                <a href="./">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="AsyncActions.html">
            
                <a href="AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="AsyncFlow.html">
            
                <a href="AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Middleware.html">
            
                <a href="Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.4.4" data-path="UsageWithReactRouter.html">
            
                <a href="UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="ExampleRedditAPI.html">
            
                <a href="ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../recipes/">
            
                <a href="../recipes/">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../recipes/MigratingToRedux.html">
            
                <a href="../recipes/MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../recipes/UsingObjectSpreadOperator.html">
            
                <a href="../recipes/UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../recipes/ReducingBoilerplate.html">
            
                <a href="../recipes/ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../recipes/ServerRendering.html">
            
                <a href="../recipes/ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../recipes/WritingTests.html">
            
                <a href="../recipes/WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../recipes/ComputingDerivedData.html">
            
                <a href="../recipes/ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../recipes/ImplementingUndoHistory.html">
            
                <a href="../recipes/ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../recipes/IsolatingSubapps.html">
            
                <a href="../recipes/IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../recipes/StructuringReducers.html">
            
                <a href="../recipes/StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="../recipes/reducers/PrerequisiteConcepts.html">
            
                <a href="../recipes/reducers/PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="../recipes/reducers/BasicReducerStructure.html">
            
                <a href="../recipes/reducers/BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="../recipes/reducers/SplittingReducerLogic.html">
            
                <a href="../recipes/reducers/SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="../recipes/reducers/RefactoringReducersExample.html">
            
                <a href="../recipes/reducers/RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="../recipes/reducers/UsingCombineReducers.html">
            
                <a href="../recipes/reducers/UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="../recipes/reducers/BeyondCombineReducers.html">
            
                <a href="../recipes/reducers/BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="../recipes/reducers/NormalizingStateShape.html">
            
                <a href="../recipes/reducers/NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="../recipes/reducers/UpdatingNormalizedData.html">
            
                <a href="../recipes/reducers/UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="../recipes/reducers/ReusingReducerLogic.html">
            
                <a href="../recipes/reducers/ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                <a href="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="../recipes/reducers/InitializingState.html">
            
                <a href="../recipes/reducers/InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../recipes/UsingImmutableJS.html">
            
                <a href="../recipes/UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../FAQ.html">
            
                <a href="../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../faq/General.html">
            
                <a href="../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../faq/Reducers.html">
            
                <a href="../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../faq/OrganizingState.html">
            
                <a href="../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../faq/StoreSetup.html">
            
                <a href="../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../faq/Actions.html">
            
                <a href="../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../faq/ImmutableData.html">
            
                <a href="../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../faq/CodeStructure.html">
            
                <a href="../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../faq/Performance.html">
            
                <a href="../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../faq/ReactRedux.html">
            
                <a href="../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../faq/Miscellaneous.html">
            
                <a href="../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../Troubleshooting.html">
            
                <a href="../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Glossary.html">
            
                <a href="../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../api/">
            
                <a href="../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../api/createStore.html">
            
                <a href="../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../api/Store.html">
            
                <a href="../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../api/combineReducers.html">
            
                <a href="../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../api/applyMiddleware.html">
            
                <a href="../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../api/bindActionCreators.html">
            
                <a href="../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../api/compose.html">
            
                <a href="../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Feedback.html">
            
                <a href="../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Usage with React Router</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="usage-with-react-router">Usage with React Router</h1>
<p>So you want to do routing with your Redux app. You can use it with <a href="https://github.com/reactjs/react-router" target="_blank">React Router</a>. Redux will be the source of truth for your data and React Router will be the source of truth for your URL. In most of the cases, <strong>it is fine</strong> to have them separate unless you need to time travel and rewind actions that triggers the change URL.</p>
<h2 id="installing-react-router">Installing React Router</h2>
<p><code>react-router</code> is available on npm . This guides assumes you are using <code>react-router@^2.7.0</code>.</p>
<p><code>npm install --save react-router</code></p>
<h2 id="configuring-the-fallback-url">Configuring the Fallback URL</h2>
<p>Before integrating React Router, we need to configure our development server. Indeed, our development server may be unaware of the declared routes in React Router configuration. For example, if you access <code>/todos</code> and refresh, your development server needs to be instructed to serve <code>index.html</code> because it is a single-page app. Here&apos;s how to enable this with popular development severs.</p>
<blockquote>
<h3 id="note-on-create-react-app">Note on Create React App</h3>
<p>If you are using Create React App, you won&apos;t need to configure a fallback URL, it is automatically done.</p>
</blockquote>
<h3 id="configuring-express">Configuring Express</h3>
<p>If you are serving your <code>index.html</code> from Express:</p>
<pre><code class="lang-js">  app.get(<span class="hljs-string">&apos;/*&apos;</span>, (req,res) =&gt; {
    res.sendfile(path.join(__dirname, <span class="hljs-string">&apos;index.html&apos;</span>))
  })
</code></pre>
<h3 id="configuring-webpackdevserver">Configuring WebpackDevServer</h3>
<p>If you are serving your <code>index.html</code> from WebpackDevServer:
You can add to your webpack.config.dev.js:</p>
<pre><code class="lang-js">  devServer: {
    historyApiFallback: <span class="hljs-literal">true</span>,
  }
</code></pre>
<h2 id="connecting-react-router-with-redux-app">Connecting React Router with Redux App</h2>
<p>Along this chapter, we will be using the <a href="https://github.com/reactjs/redux/tree/master/examples/todos" target="_blank">Todos</a> example. We recommend you to clone it while reading this chapter.</p>
<p>First we will need to import <code>&lt;Router /&gt;</code> and <code>&lt;Route /&gt;</code> from React Router. Here&apos;s how to do it:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Router, Route, browserHistory } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router&apos;</span>;
</code></pre>
<p>In a React app, usually you would wrap <code>&lt;Route /&gt;</code> in <code>&lt;Router /&gt;</code> so that when the URL changes, <code>&lt;Router /&gt;</code> will match a branch of its routes, and render their configured components. <code>&lt;Route /&gt;</code> is used to declaratively map routes to your application&apos;s component hierarchy. You would declare in <code>path</code> the path used in the URL and in <code>component</code> the single component to be rendered when the route matches the URL.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> Root = () =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{App}</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span>  
);
</span></code></pre>
<p>However, in our Redux App we will still need <code>&lt;Provider /&gt;</code>. <code>&lt;Provider /&gt;</code> is the higher-order component provided by React Redux that lets you bind Redux to React (see <a href="../basics/UsageWithReact.html">Usage with React</a>).</p>
<p>We will then import the <code>&lt;Provider /&gt;</code> from React Redux:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Provider } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
</code></pre>
<p>We will wrap <code>&lt;Router /&gt;</code> in <code>&lt;Provider /&gt;</code> so that route handlers can get <a href="http://redux.js.org/docs/basics/UsageWithReact.html#passing-the-store" target="_blank">access to the <code>store</code></a>.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> Root = ({ store }) =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Provider</span> <span class="hljs-attr">store</span>=<span class="hljs-string">{store}</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">Router</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{App}</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">Provider</span>&gt;</span>
);
</span></code></pre>
<p>Now the <code>&lt;App /&gt;</code> component will be rendered if the URL matches &apos;/&apos;. Additionally, we will add the optional <code>(:filter)</code> parameter to <code>/</code>, because we will need it further on when we try to read the parameter <code>(:filter)</code> from the URL.</p>
<pre><code class="lang-js">&lt;Route path=<span class="hljs-string">&quot;/(:filter)&quot;</span> component={App} /&gt;
</code></pre>
<p>You will probably want to remove the hash from the URL (e.g: <code>http://localhost:3000/#/?_k=4sbb0i</code>). For doing this, you will need to also import <code>browserHistory</code> from React Router:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Router, Route, browserHistory } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router&apos;</span>;
</code></pre>
<p>and pass it to the <code>&lt;Router /&gt;</code> in order to remove the hash from the URL:</p>
<pre><code class="lang-js">    &lt;Router history={browserHistory}&gt;
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/(:filter)&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{App}</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span></span>
</code></pre>
<p>Unless you are targeting old browsers like IE9, you can always use <code>browserHistory</code>.</p>
<h4 id="componentsrootjs"><code>components/Root.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Provider } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> { Router, Route, browserHistory } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router&apos;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./App&apos;</span>;

<span class="hljs-keyword">const</span> Root = ({ store }) =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Provider</span> <span class="hljs-attr">store</span>=<span class="hljs-string">{store}</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">Router</span> <span class="hljs-attr">history</span>=<span class="hljs-string">{browserHistory}</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/(:filter)&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{App}</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">Provider</span>&gt;</span>
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
};

export default Root;
</span></code></pre>
<h2 id="navigating-with-react-router">Navigating with React Router</h2>
<p>React Router comes with a <a href="https://github.com/reactjs/react-router/blob/master/docs/API.md#link" target="_blank"><code>&lt;Link /&gt;</code></a> component that lets you navigate around your application. In our example, we can wrap <code>&lt;Link /&gt;</code> with a new container component <code>&lt;FilterLink /&gt;</code> so as to dynamically change the URL. The <code>activeStyle={}</code> property lets us apply a style on the active <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<h4 id="containersfilterlinkjs"><code>containers/FilterLink.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Link } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router&apos;</span>;

<span class="hljs-keyword">const</span> FilterLink = ({ filter, children }) =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span>
    <span class="hljs-attr">to</span>=<span class="hljs-string">{filter</span> =<span class="hljs-string">==</span> &apos;<span class="hljs-attr">all</span>&apos; ? &apos;&apos; <span class="hljs-attr">:</span> <span class="hljs-attr">filter</span>}
    <span class="hljs-attr">activeStyle</span>=<span class="hljs-string">{{</span>
      <span class="hljs-attr">textDecoration:</span>&apos;<span class="hljs-attr">none</span>&apos;,
      <span class="hljs-attr">color:</span> &apos;<span class="hljs-attr">black</span>&apos;
    }}
  &gt;</span>
    {children}
  <span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
);

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FilterLink;
</code></pre>
<h4 id="componentsfooterjs"><code>components/Footer.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> FilterLink <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../containers/FilterLink&apos;</span>

<span class="hljs-keyword">const</span> Footer = () =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
    Show:
    {&quot; &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;all&quot;</span>&gt;</span>
      All
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
    {&quot;, &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span>
      Active
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
    {&quot;, &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;completed&quot;</span>&gt;</span>
      Completed
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
);

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Footer
</code></pre>
<p>Now if you click on <code>&lt;FilterLink /&gt;</code> you will see that your URL will change from <code>&apos;/complete&apos;</code>, <code>&apos;/active&apos;</code>, <code>&apos;/&apos;</code>. Even if you are going back with your browser, it will use your browser&apos;s history and effectively go to your previous URL.</p>
<h2 id="reading-from-the-url">Reading From the URL</h2>
<p>Currently, the todo list is not filtered even after the URL changed. This is because we are filtering from <code>&lt;VisibleTodoList /&gt;</code>&apos;s <code>mapStateToProps()</code> is still bound to the <code>state</code> and not to the URL. <code>mapStateToProps</code> has an optional second argument <code>ownProps</code> that is an object with every props passed to <code>&lt;VisibleTodoList /&gt;</code></p>
<h4 id="containersvisibletodolistjs"><code>containers/VisibleTodoList.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> mapStateToProps = (state, ownProps) =&gt; {
  <span class="hljs-keyword">return</span> {
    todos: getVisibleTodos(state.todos, ownProps.filter) <span class="hljs-comment">// previously was getVisibleTodos(state.todos, state.visibilityFilter)</span>
  };
};
</code></pre>
<p>Right now we are not passing anything to <code>&lt;App /&gt;</code> so <code>ownProps</code> is an empty object. To filter our todos according to the URL, we want to pass the URL params to <code>&lt;VisibleTodoList /&gt;</code>.</p>
<p>When previously we wrote:  <code>&lt;Route path=&quot;/(:filter)&quot; component={App} /&gt;</code>, it made available inside <code>App</code> a <code>params</code> property.</p>
<p><code>params</code> property is an object with every param specified in the url. <em>e.g: <code>params</code> will be equal to <code>{ filter: &apos;completed&apos; }</code> if we are navigating to <code>localhost:3000/completed</code>. We can now read the URL from <code>&lt;App /&gt;</code>.</em></p>
<p>Note that we are using <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank">ES6 destructuring</a> on the properties to pass in <code>params</code> to <code>&lt;VisibleTodoList /&gt;</code>.</p>
<h4 id="componentsappjs"><code>components/App.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> App = ({ params }) =&gt; {
  <span class="hljs-keyword">return</span> (
    &lt;div&gt;
      &lt;AddTodo /&gt;
      &lt;VisibleTodoList
        filter={params.filter || &apos;all&apos;}
      /&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<h2 id="next-steps">Next Steps</h2>
<p>Now that you know how to do basic routing, you can learn more about <a href="https://github.com/reactjs/react-router/tree/master/docs" target="_blank">React Router API</a></p>
<blockquote>
<h5 id="note-about-other-routing-libraries">Note About Other Routing Libraries</h5>
<p><em>Redux Router</em> is an experimental library, it lets you keep entirely the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> of your URL inside your redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a>. It has the same API with React Router API but has a smaller community support than react-router.</p>
<p><em>React Router Redux</em> creates a binding between your redux app and react-router and it keeps them in sync. Without this binding, you will not be able to rewind the actions with Time Travel. Unless you need this, React Router and Redux can operate completely apart.</p>
</blockquote>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Middleware.html" class="navigation navigation-prev " aria-label="Previous page: Middleware">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="ExampleRedditAPI.html" class="navigation navigation-next " aria-label="Next page: Example: Reddit API">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Usage with React Router","level":"1.4.4","depth":2,"next":{"title":"Example: Reddit API","level":"1.4.5","depth":2,"path":"advanced/ExampleRedditAPI.md","ref":"./advanced/ExampleRedditAPI.md","articles":[]},"previous":{"title":"Middleware","level":"1.4.3","depth":2,"path":"advanced/Middleware.md","ref":"./advanced/Middleware.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"advanced/UsageWithReactRouter.md","mtime":"2017-03-15T14:47:14.899Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

